<template>
  <div id="submit">
    <div class="submit_form">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="作品名：" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="作者：" prop="author">
          <el-input v-model="ruleForm.author"></el-input>
        </el-form-item>
        <el-form-item label="网址：" prop="url">
          <el-input v-model="ruleForm.url"></el-input>
        </el-form-item>
        <el-form-item label="作品图片：" prop="picture">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            list-type="picture">
            <el-button size="small" type="primary" class="upload">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="描述：">
          <el-input
            type="textarea"
            style="font-size: 14px;"
            :autosize="{ minRows: 10, maxRows: 5}"
            v-model="ruleForm.describe">
          </el-input>
        </el-form-item>
        <el-form-item class="form_button">
          <el-button type="primary" @click="submitForm('ruleForm')" class="upload">立即上传</el-button>
          <el-button @click="resetForm('ruleForm')" class="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Submit",
  data() {
    return {
      ruleForm: {
        name: '',
        author: '',
        url: '',
        picture: '',
        describe: ''
      },
      fileList: [{
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }, {
        name: 'food2.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }],
      rules: {
        name: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 1, max: 30, message: '不得多于30个字符', trigger: 'blur'}
        ],
        author: [
          {required: true, message: '请输入作者', trigger: 'blur'},
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    }
  }
}
</script>

<style lang="less" scoped>
#submit {
  width: 100%;
  height: 100%;

  .submit_form {
    display: flex;
    justify-content: center;
    margin-top: -5%;

    .el-form {
      width: 65%;

      .form_button {
        display: flex;
        justify-content: center;
      }

      .upload {
        background-color: black;
        border-color: black;
      }

      .reset {
        color: black;
        font-weight: bold;
        background-color: #ffffff;
        border-color: #ffffff;
      }
    }
  }
}
</style>
